<template>
    <div class="left">
        <ul class="tab">
            <li v-for="(item,index) in tab" :key="index" :class="['tab-item', index === tabIndex ? 'tab-item-active' : '']" @click="changeTab(index)">
                <i :class="[ 'icon' ,item.icon]"></i>
                {{item.txt}}
            </li>
        </ul>
        <div class="content">
            <PageList v-if="tabIndex === 0"/>
            <Module v-if="tabIndex === 1"/>
            <Control v-if="tabIndex === 2"/>
        </div>
    </div>
</template>

<script>
import PageList from '@/components/left/page_list'
import Module from '@/components/left/module'
import Control from '@/components/left/control'
import { mapState } from 'vuex'
export default {
    components:{ PageList, Module,Control },
    data() {
        return {
            tab:[
                {txt:'页面',icon: 'el-icon-data-board'},
                {txt:'模块',icon: 'el-icon-cpu'},
                {txt:'控件',icon: 'el-icon-full-screen'}
            ],
            tabIndex:0
        }
    },
    computed:{
		...mapState(['pageOnlyId'])
    },
    methods: {
        changeTab(index){
            if(index == 1 || index == 2){
                if(this.pageOnlyId < 0){
                    this.util.confirm('请先新建 并选择自定义页面?',() => { })
                }else{
                   this.tabIndex = index
                }
            }else{
                this.tabIndex = index 
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.left{display: flex;height: 100%;flex: none;
    .tab{background: #273239;width: 80px;overflow-x: hidden;height: 100%;flex: none;
        .tab-item{height: 100px;width: 100%;display: flex;align-items: center;justify-content: center;color: #8e9499;font-size: 14px;transition: all .3s;
            &-active{background: #1a242b;color: #fff}
            &:hover{color: #e4e4e4;background: #1a242b;cursor: pointer;}
            .icon{font-size: 18px;margin-right: 4px}
        }
    }
    .content{width: 370px;height: 100%;background: #fff;flex: none;

        
    }
}
</style>

